<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/joint.min.css"/>
    <link rel="stylesheet" href="css/toolbar.css"/>
    <link rel="stylesheet" href="css/rappid.css"/>
    <link rel="stylesheet" href="css/jquery.my-modal.1.1.winStyle.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.my-modal.1.1.js"></script>
    <script src="js/lodash.min.js"></script>
    <script src="js/backbone-min.js"></script>
    <!--<script src="js/joint.min.js"></script>-->
    <script src="js/rappid.js"></script>
    <!--<script src="js/joint.ui.stencil.js"></script>-->
</head>
<body>
<div id="app">
    <div id="toolbar">
        <h3>标准库数据模型</h3>
        <span class="max"></span>
        <span class="min"></span>
        <span class="undo"></span>
        <span class="redo"></span>
        <span class="print"></span>
        <div class="search_t">
            <input type="text" placeholder="请输入要搜索的内容"/>
        </div>
       <button class="svg">Export svg</button>
        <button class="png">Export png</button>
        <button class="E_json">Export json</button>
        <button class="I_json">import json</button>
        <button class="layout">layout</button>
    </div>
    <div id="stencil-holder">
        <div id="stencil-tool">
            <h3>工具栏</h3>
        </div>
    </div>
    <div class="paperBox">
        <div id="paper"></div>
        <div id="myholder-small"></div>
    </div>
    <!-- 模态框开始-->
    <div class="m-modal">
        <div class="m-modal-dialog">
            <div class="m-top">
                <h4 class="m-modal-title">
                    json数据
                </h4>
                <span class="m-modal-close">&times;</span>
            </div>
            <div class="m-middle">
                <!--content-->
                <p contenteditable="true"></p>
            </div>
            <div class="m-bottom">
                <button class="m-btn-sure">关闭</button>
                <button class="m-btn-cancel">导入</button>
            </div>
        </div>
    </div>
    <!--模态框结束-->
    <div class="inspector-container"></div>
    <div class="content_table">
            <table id="tb" cellspacing="0">
                <tr>
                    <td colspan="10" style="text-align:right">
                        <span class="close_tb">×</span> <input id="BtAdd" type="button" value="添加" />&nbsp;<input id="BtDel" type="button" value="删除" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input class="CKA" name="CKA" type="checkbox"/></td>
                    <td colspan="4">
                        <input style="text-align:center"; type="text" value="State" class="title_td" name="title_td"/></td>
                </tr>
                <tr>
                    <td style="text-align: center"></td>
                    <td style="text-align: center">
                        <input class="CK" type="checkbox" name="CK"/></td>
                    <td style="text-align: center">
                        <input class="TName" type="text" name="TName" /></td>
                    <td style="text-align: center">
                        <input class="TRm" type="text" name="TRm" /></td>
                    <td style="text-align: center">
                        <input class="TLen" type="text" name="TLen" /></td>
                    <td style="text-align: center">
                        <input class="TxtSortNO" type="text"name="TxtSortNO" /></td>
                </tr>
                <tr>
                    <td style="text-align: center">1</td>
                    <td style="text-align: center">
                        <input class="CK" type="checkbox" name="CK"/></td>
                    <td style="text-align: center">
                        <input class="TName" type="text" name="TName" /></td>
                    <td style="text-align: center">
                        <input class="TRm" type="text" name="TRm" /></td>
                    <td style="text-align: center">
                        <input class="TLen" type="text" name="TLen" /></td>
                    <td style="text-align: center">
                        <input class="TxtSortNO" type="text"name="TxtSortNO" /></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td style="text-align: center">
                        <input class="CK" type="checkbox" name="CK"/></td>
                    <td style="text-align: center">
                        <input class="TName" type="text" name="TName" /></td>
                    <td style="text-align: center">
                        <input class="TRm" type="text" name="TRm" /></td>
                    <td style="text-align: center">
                        <input class="TLen" type="text" name="TLen" /></td>
                    <td style="text-align: center">
                        <input class="TxtSortNO" type="text"name="TxtSortNO" /></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td style="text-align: center">
                        <input class="CK" type="checkbox" name="CK"/></td>
                    <td style="text-align: center">
                        <input class="TName" type="text" name="TName" /></td>
                    <td style="text-align: center">
                        <input class="TRm" type="text" name="TRm" /></td>
                    <td style="text-align: center">
                        <input class="TLen" type="text" name="TLen" /></td>
                    <td style="text-align: center">
                        <input class="TxtSortNO" type="text"name="TxtSortNO" /></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td style="text-align: center">
                        <input class="CK" type="checkbox" name="CK"/></td>
                    <td style="text-align: center">
                        <input class="TName" type="text" name="TName" /></td>
                    <td style="text-align: center">
                        <input class="TRm" type="text" name="TRm" /></td>
                    <td style="text-align: center">
                        <input class="TLen" type="text" name="TLen" /></td>
                    <td style="text-align: center">
                        <input class="TxtSortNO" type="text"name="TxtSortNO" /></td>
                </tr>
                <tr>
                    <td style="text-align: center">5</td>
                    <td style="text-align: center">
                        <input class="CK" type="checkbox" name="CK"/></td>
                    <td style="tclassext-align: center">
                        <input class="TName" type="text" name="TName" /></td>
                    <td style="text-align: center">
                        <input class="TRm" type="text" name="TRm" /></td>
                    <td style="text-align: center">
                        <input class="TLen" type="text" name="TLen" /></td>
                    <td style="text-align: center">
                        <input class="TxtSortNO" type="text"name="TxtSortNO" /></td>
                </tr>
                <tr>
                    <td style="text-align: center">6</td>
                    <td style="text-align: center">
                        <input class="CK" type="checkbox" name="CK"/></td>
                    <td style="text-align: center">
                        <input class="TName" type="text" name="TName" /></td>
                    <td style="text-align: center">
                        <input class="TRm" type="text" name="TRm" /></td>
                    <td style="text-align: center">
                        <input class="TLen" type="text" name="TLen" /></td>
                    <td style="text-align: center">
                        <input class="TxtSortNO" type="text"name="TxtSortNO" /></td>
                </tr>
            </table>
        </div>
</div>


<script>
    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        width: 2000,
        height: 1450,
        model: graph,
        gridSize: 1,

    });
    var paperScroller = new joint.ui.PaperScroller({
        paper: paper,
        cursor: 'grab'
    });
    // Or dynamically change cursor e.g. when user is about to select elements.
    $('#paper').append(paperScroller.render().el);

    var k=12.5*Math.pow(2,0.5);
    joint.shapes.uml.Bulb = joint.shapes.uml.State.extend({
        markup: '<g class="rotatable"><g class="scalable"><rect class="uml-state-body"/></g><path class="uml-state-separator"/><text class="uml-state-name"/><text class="uml-state-events event1"/><text class="uml-state-events event2"/><text class="uml-state-events event3"/></g>',
        defaults: joint.util.deepSupplement({
            type: 'uml.Bulb',
            size: { width: 50, height: 50 },
            attrs: {
                'rect': { fill: 'rgba(48, 208, 198, 0.1)', stroke: 'rgba(48, 208, 198, 0.5)', 'follow-scale': true, width: 160, height: 40,'stroke-width': 1.5,rx:10,ry:10 },
                '.uml-state-separator': {'stroke-dasharray':"0", fill: 'rgba(48, 208, 198, 0.4)', stroke:"rgba(48, 208, 198, 0.4)",'stroke-width':"2",d:"M 0 20 L 160 20"},
                '.uml-state-name1':{
                    'font-size': '11', 'white-space': 'pre', 'text-anchor': 'middle', fill:'#ececec', 'font-family': "Roboto Condensed", 'font-weight': 'normal', transform: 'matrix(1, 0, 0, 1, 80, 5)'
                },
                '.uml-state-event1':{
                    'font-size': '11', 'white-space': 'pre', 'text-anchor': 'middle', fill:'#ececec', 'font-family': "Roboto Condensed", 'font-weight': 'normal'
                },
                '.event2':{
                    'font-size': '11', 'white-space': 'pre', 'text-anchor': 'middle', fill:'#ececec', 'font-family': "Roboto Condensed", 'font-weight': 'normal', transform: 'matrix(1, 0, 0, 1, 100, 0)','ref-x':".5", 'ref-y':".5",ref:"rect"
                },
                '.event3':{
                    'font-size': '11', 'white-space': 'pre', 'text-anchor': 'middle', fill:'#ececec', 'font-family': "Roboto Condensed", 'font-weight': 'normal', transform: 'matrix(1, 0, 0, 1, 170, 0)'
                },
            }
        }, joint.shapes.uml.State.prototype.defaults)
    });

    var Bulb=new joint.shapes.uml.Bulb({size: { width: 230, height: 80 },position: { x: 5, y:10 }, events: ["content1"/*,"exit / kill()"*/],event2:['content2']});

    //元素之间的只能连接元素
    var snaplines = new joint.ui.Snaplines({ paper: paper });
    snaplines.startListening();
    //自动调节元素的大小
    /*function autosize(element) {

        var view = paper.findViewByModel(element);
        var text = view.$('text')[0];
        // Use bounding box without transformations so that our autosizing works
        // even on e.g. rotated element.
        var bbox = V(text).bbox(true);
        // Give the element some padding on the right/bottom.
        element.resize(bbox.width + 50, bbox.height + 50);
    }
    graph.on('change:attrs', function(cell) { autosize(cell) });*/
    //单击元素绘图
    paper.on('cell:pointerdown', function(cellView) {
        // We don't want a Halo for links.
        var halo = new joint.ui.Halo({ cellView: cellView });

        halo.changeHandle('remove', {
            attrs: {
                '.handle': {
                    'data-tooltip-class-name': 'small',
                    'data-tooltip': 'Click to remove the object',
                    'data-tooltip-position': 'right'
                }
            }
        });
        //元素只连接元素
        halo.on('action:link:add', function(link) {
            if (!link.get('source').id || !link.get('target').id) {
                link.remove();
            }
        });
        halo.render();
    });

    //双击元素修改样式
    paper.on('cell:pointerdblclick', function(cellView) {
        if($(cellView.el).hasClass("joint-type-uml")){  //uml元素
            var inspector = new joint.ui.Inspector({
             cellView: cellView,
             inputs: {
             name: {
             //                    group: 'text',
             index: 1,
             type: 'text',
             },
             events: {
             group: 'events',
             index: 1,
             type: 'list',
             item: {
             type: 'text'
             }
             },

             },
             groups: {
             presentation: {
             label: 'Presentation',
             index: 1
             },
             text: {
             label: 'Text',
             index: 2
             }
             }
             });
             inspector.render();
             $('.inspector-container').html(inspector.el);
           /* $('.content_table').css("display","block");
            console.log(cellView.$el);
            $('.close_tb').click(function(){
                $('.content_table').css("display","none");
                $(cellView.el).find(".uml-state-events").children().remove();
                var td_ct = $(".TName");
                $.each(td_ct,function(){
                    if($(this).val() == ""){
                        return;
                    }
                    var tt =  $(this).val();
                    // $('.uml-state-events').append(tt);
                    var tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
                    var tSpanTextNode = document.createTextNode(tt);
                    tspan.appendChild(tSpanTextNode);
                    tspan.setAttribute('dy','1.2em');
                    tspan.setAttribute('x','0');
                    tspan.setAttribute('class','v-line');
                    tspan.setAttribute('id','"v-"+Math.ceil(Math.random() * 1000)');
                    $(cellView.el).find(".uml-state-events").append(tspan);
                });

            });
            console.log($(cellView.el))*/
        }
     /*   if(cellView.$el.hasClass("joint-type-uml")){

            $('.content_table').css("display","block"); //表格显示

            var bb=  cellView.$el.find(".event1").children();
            console.log(bb);
            $.map($(".TName"),function(i,v){   //遍历表格的数据
                var that = v.value;
                $.each(bb,function(){
                    that = $(this).text()
                })
            });

            $('.close_tb').unbind('click').click(function(){
                //添加表头数据
                var a = $('.title_td').val();
                console.log(cellView.$el.find(".uml-state-name").children().text(a));

                $('.content_table').css("display","none");  //表格隐藏
                cellView.$el.find(".event1").children().remove(); //删除原有的数据
                //添加新的数据
                var td_ct = $(".TName");
                $.each(td_ct,function(){
                    if($(this).val() == ""){
                        return;
                    }
                    var tt =  $(this).val();
                    var tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
                    var tSpanTextNode = document.createTextNode(tt);
                    tspan.appendChild(tSpanTextNode);
                    tspan.setAttribute('dy','1.5em');
                    tspan.setAttribute('x','0');
                    tspan.setAttribute('class','v-line');
                    cellView.$el.find(".event1").append(tspan);
                });
            });
        }*/
        if($(cellView.el).hasClass("joint-type-basic")){   //basic元素
            var options = {
                colorPalette: [
                    { content: '#f6f6f6' },
                    { content: '#dcd7d7' },
                    { content: '#8f8f8f' },
                    { content: '#c6c7e2' },
                    { content: '#feb663' },
                    { content: '#fe854f' },
                    { content: '#b75d32' },
                    { content: '#31d0c6' },
                    { content: '#7c68fc' },
                    { content: '#61549C' },
                    { content: '#6a6c8a' },
                    { content: '#4b4a67' },
                    { content: '#3c4260' },
                    { content: '#33334e' },
                    { content: '#222138' }
                ]};
            var inspector = new joint.ui.Inspector({
                cellView: cellView,
                inputs: {
                    attrs: {
                        circle: {
                            fill: {
                                type: 'color-palette',
                                options: options.colorPalette,
                                label: 'Fill color',
                                group: 'presentation',
                                index: 1
                            },
                            stroke: {
                                type: 'color-palette',
                                options:options.colorPalette,
                                label: 'Outline color',
                                group: 'presentation',
                                index: 2
                            },
                            'stroke-width': {
                                type: 'range',
                                min: 0,
                                max: 50,
                                unit: 'px',
                                label: 'Outline thickness',
                                group: 'presentation',
                                index: 3
                            }
                        },
                        text: {
                            text: {
                                type: 'textarea',
                                label: 'Text',
                                group: 'text',
                                index: 1
                            },
                            'font-size': {
                                type: 'range',
                                min: 5,
                                max: 30,
                                label: 'Font size',
                                group: 'text',
                                index: 2
                            },
                            'font-family': {
                                type: 'select',
                                options: ['Arial', 'Times New Roman', 'Courier New'],
                                label: 'Font family',
                                group: 'text',
                                index: 3
                            },
                            'fill':{
                                type:"color-palette",
                                options: options.colorPalette,
                                label: 'Font color',
                                group: 'text',
                                index:4
                            }
                        }
                    }
                },
                groups: {
                    presentation: {
                        label: 'Presentation',
                        index: 1
                    },
                    text: {
                        label: 'Text',
                        index: 2
                    }
                }
            });
            inspector.render();
            $('.inspector-container').html(inspector.el);
        }

        var a=$("<a>确认</a>");
        $(".joint-inspector").append(a);
        $(".joint-inspector a").click(function(){
            $(".joint-inspector").css("display","none")
        })
    });

   /* $('.joint-viewport').on('dblclick','.joint-element', function () {
        if($(this).hasClass("joint-type-uml")){
            var thisEle = $(this);
            var tspan;
            $('.content_table').css("display","block"); //表格显示

                    var event1=  $(this).find('.event1').children();  //event1的数据
                    $.map($('.TName'),function(i,v){   //遍历表格的数据
                        var that = v.value;
                        $.each(event1,function(){
                            that = $(this).text()
                        })
                    });

                    var event2=  $(this).find('.event2').children();//event2的数据
                    $.map($('.TRm'),function(i,v){   //遍历表格的数据
                        var that = v.value;
                        $.each(event2,function(){
                            that = $(this).text()
                        })
                    });

                    var event3=  $(this).find('.event2').children();//event2的数据
                    $.map($('.TLen'),function(i,v){   //遍历表格的数据
                        var that = v.value;
                        $.each(event3,function(){
                            that = $(this).text()
                        })
                    });
                    $('.close_tb').unbind('click').click(function(){
                        //添加表头数据
                      thisEle.find(".uml-state-name").children().text($('.title_td').val());
                        $('.content_table').css("display","none");  //表格隐藏

                        thisEle.find('.event1').children().remove(); //删除event1原有的数据
                        thisEle.find('.event2').children().remove(); //删除event2原有的数据
                        thisEle.find('.event3').children().remove(); //删除event3原有的数据
                        //添加新的数据
                        var td_TN = $('.TName');
                        var td_TRm = $('.TRm');
                        var td_TLen = $('.TLen');
                        $.each(td_TN,function(){
                            if($(this).val() == ""){
                                return;
                            }
                            var tt =  $(this).val();
                            addTspan(tt);
                            thisEle.find('.event1').append(tspan);
                            thisEle.find('.event1').children("tspan").get(0).setAttribute('dy','0');
                        });
                        $.each(td_TRm,function(){
                            if($(this).val() == ""){
                                return;
                            }
                            var tt =  $(this).val();
                            addTspan(tt);
                            thisEle.find('.event2').append(tspan);
                            thisEle.find('.event2').children("tspan").get(0).setAttribute('dy','0');
                        });
                        $.each(td_TLen,function(){
                            if($(this).val() == ""){
                                return;
                            }
                            var tt =  $(this).val();
                            addTspan(tt);
                            thisEle.find('.event3').append(tspan);
                            thisEle.find('.event3').children("tspan").get(0).setAttribute('dy','0');
                        });
                    });

            function addTspan(tt){
                tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
                var tSpanTextNode = document.createTextNode(tt);
                var ID = "v-"+Math.ceil(Math.random() * 1000);
                tspan.appendChild(tSpanTextNode);
                tspan.setAttribute('dy','1.5em');
                tspan.setAttribute('x','0');
                tspan.setAttribute('class','v-line');
                tspan.setAttribute('id',ID);
            }
        }
    });*/
    /*var paperSmall = new joint.dia.Paper({
        el: $('#myholder-small'),
        width: 238,
        height: 170,
        model: graph,
        gridSize: 1
    });
    paperSmall.scale(.12);
    paperSmall.$el.css('pointer-events', 'none');*/
    //小图开始
    var nav = new joint.ui.Navigator({
        paperScroller: paperScroller,
        width: 238,
        height: 170,
        padding: 10,
        model: graph,
        gridSize: 1,
//        zoomOptions: { max: 2, min: 0.12 }
    });
    nav.$el.appendTo('#myholder-small');
    nav.render();
    //小图结束

    //模板开始
    var stencil = new joint.ui.Stencil({ graph: graph,paper: paper, width: 250,
        search: {
            '*': ['attrs/text/text'],
            'basic.Image': ['description'],
            'basic.Path': ['description']
        },
        groups: {
        one: { label: '数据实体', index: 1 },
        two: { label: '文本', index: 2 },
        three: { label: '通用', index: 3,closed:true }
    }});
    $('#stencil-holder').append(stencil.render().el);

    var c = new joint.shapes.basic.Circle({position: {x: 50, y: 180}, size: {width: 100, height: 60}});
    var t = new joint.shapes.basic.Text({position: {x: 50, y: 10},size: {width: 100, height: 60}});
    t.attr({text:{text: 'showTime', fill: '#34f1f1'}});

    var uml = joint.shapes.uml;
    var s3 = new uml.State({
        position: { x:30  , y: 100 },
        size: { width: 160, height: 60 },
        name: "table结构",
        events: ["content"/*,"exit / kill()"*/],
        attrs: {
            '.uml-state-body': {
                fill: 'rgba(48, 208, 198, 0.1)',
                stroke: 'rgba(48, 208, 198, 0.5)',
                'stroke-width': 1.5
            },
            '.uml-state-separator': {
                stroke: 'rgba(48, 208, 198, 0.4)'
            }
        }
    });
    //stencil.load([r, c]);//
    //graph.addCells(el1,c);
    stencil.load({ one: [s3, c,Bulb], two: [t] });
    //模板结束

    //编辑表格
    //隐藏模板tr
    $("#tb tr").eq(2).hide();
    var i = 6;
    $("#BtAdd").click(function() {
        //复制一行
        var tr = $("#tb tr").eq(2).clone();
        tr.find("td").get(0).innerHTML = ++i;
        tr.show();
        tr.appendTo("#tb");
    });
    $("#BtDel").click(function() {
        $("#tb tr:gt(2)").each(function() {
            if ($(this).find(".CK").get(0).checked == true) {
                $(this).remove();
            }
        });
        i = 0;
        $("#tb tr:gt(2)").each(function() {
            $(this).find("td").get(0).innerHTML = ++i;
        });
        $(".CKA").attr("checked", false);
    });
    $(".CKA").click(function() {
        $("#tb tr:gt(2)").each(function() {
            $(this).find(".CK").get(0).checked = $(".CKA").get(0).checked;
        });
    });
    $("input[name]").keydown(function(e){//input[name=pwd]当前所在焦点
        if (e.keyCode == "13") {
                $("input[name]").blur();//将焦点放到name=textInput的input里
        };
    })


</script>
<script src="js/toolbar.js"></script>
</body>
</html>